<!-- LoadingWrapper.svelte -->
<script lang="ts">
	import Button from '@smui/button';
	import Page_404 from './404.svelte';
	import Page_500 from './500.svelte';
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	let className = '';

	export let err_status: number | string = '';
	export let loading = false; // 加载状态属性
	export let style = '';
	export { className as class };

	function reloadHtmlPage() {
		window.location.reload();
	}

	function re_request() {
		// TODO: 重新请求
		dispatch('request');
	}

	function createRandomHeight(min: number = 100, max: number = 160) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
</script>

{#if loading}
	<div class={['loading-placeholder', className].join(' ')} {style}>
		<div class="loader w-full h-full!"></div>
	</div>
{:else if err_status !== ''}
	<div class={['loading-placeholder', className].join(' ')} {style}>
		<h1>
			Sorry,
			<span class="font-size-2xl">the request has <span class="color-red-4">timed out</span></span>
		</h1>
		<Button class="" variant="raised" on:click={re_request}>Re request</Button>
	</div>
{:else}
	<slot /> <!-- 通过插槽展示传入的内容 -->
{/if}

<style lang="scss">
	.loading-placeholder {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	/* HTML: <div class="loader"></div> */
	.loader {
		height: 180px;
		border-radius: 4px;
		background: linear-gradient(100deg, #fff0 calc(50% - 30px), #fff8 50%, #fff0 calc(50% + 30px))
			#e5e7eb;
		background-size: 200% 100%;
		background-position-x: 120%;
		animation: loading-skeleton 1s ease-in-out infinite;

		@keyframes loading-skeleton {
			to {
				background-position-x: -20%;
			}
		}
	}
</style>
